<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台页面</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="index.css">
  <style>
    .full-width-btn {
      padding: 30px 0;
      width: 100%;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--bg-color), #6b63ff);
      color: white;
      font-weight: 600;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .full-width-btn:hover {
      background: linear-gradient(135deg, var(--hover-color), #5a52e0);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .full-width-btn:active {
      transform: translateY(0);
    }

    .full-width-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: rgba(255, 255, 255, 0.15);
      transform: rotate(45deg);
      transition: all 0.5s ease;
      opacity: 0;
    }

    .full-width-btn:hover::after {
      opacity: 1;
      top: -30%;
      left: -30%;
    }

    .login-prompt {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: white;
      text-align: center;
    }

    .login-prompt-content {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      color: #333;
      max-width: 500px;
    }

    .login-prompt-btn {
      background: #4f46e5;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 1rem;
      font-size: 1rem;
    }
  </style>
</head>

<body>
<nav class="navbar">
  <div class="nav-container">
    <a href="#" class="logo" data-page="home">
      <i class="fas fa-rocket"></i>
      <span>后台管理平台</span>
    </a>

    <ul class="nav-links">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-page="home">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-page="about">
          <i class="fas fa-info-circle"></i>
          <span>实时日志</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="http://localhost:8080" class="nav-link" data-page="services">
          <i class="fas fa-cog"></i>
          <span>区块链浏览器</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="http://localhost:8081" class="nav-link" data-page="blog">
          <i class="fas fa-blog"></i>
          <span>keycloak</span>
        </a>
      </li>
    </ul>

    <div class="search-box">
      <input type="text" class="search-input" placeholder="搜索...">
      <button class="search-btn">
        <i class="fas fa-search"></i>
      </button>
    </div>

    <a href="#" class="cta-button" data-page="signup">关于我们</a>

    <button class="mobile-menu-btn">
      <i class="fas fa-bars"></i>
    </button>
  </div>
</nav>

<div class="content" id="content-container">
  <!-- 首页内容 -->
  <div class="page" id="home-page" style="display: flex; flex-direction: column; gap: 16px; padding: 20px; min-height: 100vh; box-sizing: border-box;">
    <button id="btnlog" class="full-width-btn" style="--bg-color: #4f46e5; --hover-color: #4338ca;margin-top: 110px">
      <i class="fas fa-rocket" style="margin-right: 12px;"></i>
      实时日志
    </button>

    <button id="btn8081" class="full-width-btn" style="--bg-color: #10b981; --hover-color: #0d9f6e;margin-top: 10px">
      <i class="fas fa-server" style="margin-right: 12px;"></i>
      keycloak配置
    </button>

    <button id="btn8080" class="full-width-btn" style="--bg-color: #f3d939; --hover-color: #d6681a;margin-top: 10px">
      <i class="fas fa-cog" style="margin-right: 12px;"></i>
      区块链浏览器
    </button>
  </div>

  <!-- 实时日志页面 -->
  <div class="page" id="about-page" style="display:none;">
    <iframe src="log.html" width="100%" height="700px" frameborder="0"></iframe>
  </div>

  <!-- 区块链浏览器页面 -->
  <div class="page" id="services-page" style="display:none;">

  </div>

  <!-- keycloak页面 -->
  <div class="page" id="blog-page" style="display:none;">

  </div>

  <!-- 登录页面 -->
  <div class="page" id="signup-page" style="display:none; padding: 20px;">
    <div class="about-container" style="max-width: 1000px; margin: 0 auto;">
      <h1 style="color: #4f46e5; text-align: center; margin-bottom: 30px;">关于管理平台</h1>

      <div class="about-section" style="background: white; border-radius: 12px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
        <h2 style="color: #4f46e5; border-bottom: 2px solid #f3f4f6; padding-bottom: 10px;">平台简介</h2>
        <p style="line-height: 1.6; color: #4b5563;">
          本后台管理平台是一个综合性的管理系统，集成了区块链浏览器、身份认证服务和实时日志监控等功能，为用户提供一站式的管理体验。
        </p>
      </div>

      <div class="features-section" style="background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
        <h2 style="color: #4f46e5; border-bottom: 2px solid #f3f4f6; padding-bottom: 10px;">主要功能</h2>
        <ul style="list-style-type: none; padding: 0;">
          <li style="padding: 10px 0; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center;">
            <i class="fas fa-file-alt" style="color: #10b981; font-size: 20px; margin-right: 15px;"></i>
            <div>
              <h3 style="margin: 0 0 5px 0; color: #111827;">实时日志监控</h3>
              <p style="margin: 0; color: #6b7280;">提供系统运行状态的实时日志查看功能，帮助管理员快速定位问题。</p>
            </div>
          </li>
          <li style="padding: 10px 0; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center;">
            <i class="fas fa-link" style="color: #3b82f6; font-size: 20px; margin-right: 15px;"></i>
            <div>
              <h3 style="margin: 0 0 5px 0; color: #111827;">区块链浏览器</h3>
              <p style="margin: 0; color: #6b7280;">集成区块链浏览器，方便查看区块链上的交易、区块等功能。</p>
            </div>
          </li>
          <li style="padding: 10px 0; display: flex; align-items: center;">
            <i class="fas fa-user-shield" style="color: #f59e0b; font-size: 20px; margin-right: 15px;"></i>
            <div>
              <h3 style="margin: 0 0 5px 0; color: #111827;">Keycloak身份认证</h3>
              <p style="margin: 0; color: #6b7280;">集成Keycloak身份认证服务，提供安全的用户管理和单点登录功能。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 服务子页面 -->
  <div class="page" id="web-dev-page" style="display:none;">
    <h1>网站开发服务</h1>
    <p>我们提供全方位的网站开发解决方案。</p>
    <!-- 更多内容... -->
  </div>

  <!-- 登录提示弹窗 -->
  <div id="login-prompt" class="login-prompt">
    <div class="login-prompt-content">
      <h2>需要登录</h2>
      <p>您需要登录才能访问此页面</p>
      <button id="redirect-login" class="login-prompt-btn">前往登录</button>
    </div>
  </div>
</div>

<script>
  let currentUser = null;
  const cookies = document.cookie;
  const cookieArr = cookies.split('; ');
  for (const cookie of cookieArr) {
    const [name, value] = cookie.split('=');
    if (name === "user_info") {
      currentUser = value;
    }
  }

  document.querySelectorAll('[data-page]').forEach(link => {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      const pageId = this.getAttribute('data-page');

      if (this.getAttribute('data-page') === 'blog' || this.getAttribute('data-page') ==='services') {
        window.location.href = this.href;
        return;
      }

      if (pageId === 'about' && currentUser === null) {
        const popup = document.getElementById('login-prompt');
        popup.style.display = 'flex';
        return;
      }

      if (this.classList.contains('dropdown-item') || this.parentElement.classList.contains('dropdown-item')) {
        const parentLink = this.closest('.nav-item').querySelector('.nav-link');
        updateActiveNav(parentLink);
      } else {
        updateActiveNav(this);
      }

      switchPage(pageId);

      if (window.innerWidth <= 992) {
        document.querySelector('.nav-links').classList.remove('active');
      }
    });
  });

  function updateActiveNav(activeLink) {
    document.querySelectorAll('.nav-link').forEach(link => {
      link.classList.remove('active');
    });

    if (activeLink.classList.contains('nav-link')) {
      activeLink.classList.add('active');
    }
  }

  function switchPage(pageId) {
    document.querySelectorAll('.page').forEach(page => {
      page.style.display = 'none';
    });

    const targetPage = document.getElementById(`${pageId}-page`);
    if (targetPage) {
      targetPage.style.display = 'block';
      history.pushState({ page: pageId }, '', `?page=${pageId}`);
    } else {
      document.getElementById('home-page').style.display = 'block';
      history.pushState({ page: 'home' }, '', '?page=home');
    }
  }

  window.addEventListener('popstate', function (e) {
    const pageId = e.state?.page || 'home';
    switchPage(pageId);
    document.querySelectorAll('.nav-link').forEach(link => {
      link.classList.toggle('active', link.getAttribute('data-page') === pageId);
    });
  });

  document.querySelector('.mobile-menu-btn').addEventListener('click', function () {
    document.querySelector('.nav-links').classList.toggle('active');
  });

  document.addEventListener('click', function (e) {
    if (!e.target.closest('.nav-container') && window.innerWidth <= 992) {
      document.querySelector('.nav-links').classList.remove('active');
    }
  });

  document.querySelectorAll('.nav-item').forEach(item => {
    if (item.querySelector('.dropdown-menu')) {
      item.addEventListener('click', function (e) {
        if (window.innerWidth <= 992) {
          const dropdown = this.querySelector('.dropdown-menu');
          if (dropdown &&!e.target.closest('.dropdown-menu')) {
            e.preventDefault();
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
          }
        }
      });
    }
  });

  document.getElementById('redirect-login').addEventListener('click', function () {
    window.location.href = 'http://localhost:9090/login';
  });
  document.getElementById('btn8080').addEventListener('click', function () {
    window.location.href = 'http://localhost:8080';
  });
  document.getElementById('btn8081').addEventListener('click', function () {
    window.location.href = 'http://localhost:8081';
  });
  document.getElementById('btnlog').addEventListener('click', function () {
    if (currentUser === null) {
      const popup = document.getElementById('login-prompt');
      popup.style.display = 'flex';
      return;
    }
    const event = new Event('click');
    document.querySelector('.nav-link[data-page="about"]').dispatchEvent(event);
  });

  function initPage() {
    const urlParams = new URLSearchParams(window.location.search);
    const pageId = urlParams.get('page') || 'home';
    switchPage(pageId);
    document.querySelectorAll('.nav-link').forEach(link => {
      link.classList.toggle('active', link.getAttribute('data-page') === pageId);
    });
  }
  initPage();
</script>
</body>

</html>
